<template>
    <div class="wh-100">
        <!--头部-->
        <Hearder></Hearder>
        <div class="w-100 pt-12 d-flex-center flex-column overflow-auto" style="height: calc(100% - 62px)">
            <div class="w-80 h-100 debugger-bor d-flex-between-center">
                <!--信息填写-->
                <div class="flex-1 h-100 mr-12 overflow-auto" style="background-color: #fff">
                    <div class="wh-100">
                        <img src="../images/resume-bannger.png" width="100%" height="200px" class="vertical-align-top" />
                        <div class="w-100 position-relative" style="height: calc(100% - 212px)">
                            <div class="w-100 px-48 position-absolute" style="left: 0; top: -60px">
                                <div class="d-flex w-100 pb-12" style="border-bottom: 1px solid #f6f8fb">
                                    <img src="../images/profilePicture.png" style="border: 10px solid #fff" />
                                    <div class="w-100 ml-12">
                                        <div style="font-size: 36px; color: white">郭冬临</div>
                                        <div style="font-size: 14px" class="mt-20">
                                            <span>基础信息：25岁</span>
                                            ｜
                                            <span>河南财经政法大学</span>
                                            ｜
                                            <span>2023届</span>
                                            ｜
                                            <span>本科</span>
                                            ｜
                                            <span>金融管理</span>
                                        </div>
                                        <div style="font-size: 14px" class="mt-12">
                                            <span>民族：汉族</span>
                                            <span>政治面貌：群众</span>
                                            <span>籍贯：河南 周口</span>
                                            <span>所在城市：河南 郑州</span>
                                        </div>
                                        <div class="d-flex-between-center w-100 mt-20">
                                            <div class="d-flex">
                                                <div class="d-flex-center mr-12" style="width: 150px; height: 40px; background-color: #e5f4fe; border: 1px solid #cbe9fd; border-radius: 20px">
                                                    <Icon color="#0294fa" type="ios-phone-portrait" />
                                                    <span style="font-size: 14px; color: #0094fa" class="ml-8">123121231233</span>
                                                </div>
                                                <div class="d-flex-center" style="width: 180px; height: 40px; background-color: #eff8ec; border: 1px solid #d1ebc8; border-radius: 20px">
                                                    <Icon type="ios-mail-outline" color="#87ca8c" />
                                                    <span style="font-size: 14px; color: #acd99a" class="ml-8">123121231233</span>
                                                </div>
                                            </div>
                                            <div style="cursor: pointer" @click="showModel(1)">
                                                <img src="../images/edit-pen.png" />
                                                <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--基本信息表单-->
                                <div v-if="messageStatus === 1" class="ml-36">
                                    <Form ref="basicInformationRef" :model="basicInformationForm" :rules="basicInformationFormRules" :label-width="80">
                                        <FormItem label="性别" prop="gender">
                                            <RadioGroup v-model="basicInformationForm.gender">
                                                <Radio label="1">男</Radio>
                                                <Radio label="2">女</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                        <FormItem label="出生日期" prop="dateOfBirth">
                                            <DatePicker :options="dateOptions_day" style="width: 400px" type="date" placeholder="请选择日期" v-model="basicInformationForm.dateOfBirth"></DatePicker>
                                        </FormItem>
                                        <FormItem label="民族" prop="nation">
                                            <Input style="width: 400px" placeholder="请输入民族" v-model="basicInformationForm.nation"></Input>
                                        </FormItem>
                                        <FormItem label="政治面貌" prop="politicsStatus">
                                            <Select style="width: 400px" placeholder="请选择政治面貌" v-model="basicInformationForm.politicsStatus">
                                                <Option :value="1">中共党员</Option>
                                                <Option :value="2">中共预备党员</Option>
                                                <Option :value="3">共青团员</Option>
                                                <Option :value="4">民革会员</Option>
                                                <Option :value="5">群众</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="籍贯" prop="province">
                                            <Select v-model="basicInformationForm.province" style="width: 200px">
                                                <Option :value="1">河南省</Option>
                                            </Select>
                                            <Select v-model="basicInformationForm.city" style="width: 200px">
                                                <Option :value="1">周口市</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="所在城市" prop="placeProvince">
                                            <Select v-model="basicInformationForm.placeProvince" style="width: 200px">
                                                <Option :value="1">河南省</Option>
                                            </Select>
                                            <Select v-model="basicInformationForm.placeCity" style="width: 200px">
                                                <Option :value="1">周口市</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="手机号" prop="phone">
                                            <Input style="width: 400px" placeholder="请输入手机号" v-model="basicInformationForm.phone"></Input>
                                        </FormItem>
                                        <FormItem label="邮箱" prop="email">
                                            <Input style="width: 400px" placeholder="请输入邮箱" v-model="basicInformationForm.email"></Input>
                                        </FormItem>
                                        <FormItem label="" prop="">
                                            <Button type="primary">保存</Button>
                                            <Button @click="messageStatus = 0">取消</Button>
                                        </FormItem>
                                    </Form>
                                </div>
                                <!--教育背景-->
                                <div class="label-title">
                                    <span class="title" style="font-size: 16px; color: #1677ff">教育背景</span>
                                </div>
                                <div class="fs-14">2020.03-2023.06 河南财经政法大学 ｜ 金融管理 ｜ 计算机应用技术 ｜ 本科</div>
                                <!--求职期望-->
                                <div class="label-title mt-12 d-flex-between">
                                    <span class="title" style="font-size: 16px; color: #1677ff">求职期望</span>
                                    <div style="cursor: pointer" @click="showModel(2)">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px; cursor: pointer">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14 pb-12" style="border-bottom: 1px solid #f6f8fb">郑州 ｜ 证券/基金/期货 ｜ 行政/后勤类 ｜ 全职 ｜ 5k-6k ｜ 一周内</div>
                                <!--求职期望表单-->
                                <div v-if="messageStatus === 2" class="mt-12 ml-36">
                                    <Form ref="jobExpectationRef" :model="jobExpectationForm" :rules="jobExpectationRules" :label-width="80">
                                        <FormItem label="工作地区" prop="operationalField">
                                            <Select multiple v-model="jobExpectationForm.operationalField" style="width: 400px; max-height: 80px; overflow: auto">
                                                <Option :value="1">河南郑州</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="从事行业" prop="engageInTheIndustry">
                                            <Select multiple v-model="jobExpectationForm.engageInTheIndustry" style="width: 400px; max-height: 80px; overflow: auto">
                                                <Option :value="1">河南郑州</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="担任职位" prop="takeUpAPosition">
                                            <Select multiple v-model="jobExpectationForm.takeUpAPosition" style="width: 400px; max-height: 80px; overflow: auto">
                                                <Option :value="1">河南郑州</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="工作类型" prop="typeOfWork">
                                            <RadioGroup v-model="jobExpectationForm.typeOfWork">
                                                <Radio class="mr-20" label="1">全职</Radio>
                                                <Radio class="mr-20" label="2">实习</Radio>
                                                <Radio class="mr-20" label="3">兼职</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                        <FormItem label="薪酬范围" prop="payRange">
                                            <div class="d-flex-center" style="width: 400px">
                                                <Input v-model="jobExpectationForm.payRangeStart" placeholder="请输入" />
                                                K&nbsp;
                                                <span>&nbsp;至&nbsp;</span>
                                                <Input v-model="jobExpectationForm.payRangeEnd" placeholder="请输入" />
                                                K
                                            </div>
                                        </FormItem>
                                        <FormItem label="到岗时间" prop="arrivalTime">
                                            <Select v-model="jobExpectationForm.arrivalTime" style="width: 400px; max-height: 80px; overflow: auto">
                                                <Option :value="1">河南郑州</Option>
                                            </Select>
                                        </FormItem>
                                        <FormItem label="求职状态" prop="statusOfJobSeeking">
                                            <RadioGroup v-model="jobExpectationForm.statusOfJobSeeking">
                                                <Radio class="mr-20" label="1">积极找工作</Radio>
                                                <Radio class="mr-20" label="2">随便看看</Radio>
                                                <Radio class="mr-20" label="3">暂时不找工作</Radio>
                                            </RadioGroup>
                                        </FormItem>
                                        <FormItem label="" prop="">
                                            <Button type="primary">保存</Button>
                                            <Button @click="messageStatus = 0">取消</Button>
                                        </FormItem>
                                    </Form>
                                </div>
                                <!--项目经验-->
                                <div class="label-title mt-12 d-flex-between">
                                    <span class="title" style="font-size: 16px; color: #1677ff">项目经验</span>
                                    <div style="cursor: pointer" @click="showModel(3)">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <pre class="fs-14">
                                 {{ projectExperience }}
                                </pre>
                                <div v-if="messageStatus === 3">
                                    <Input
                                        v-model="projectExperience"
                                        type="textarea"
                                        placeholder="例如：
                                    2016.10~2017.01 “xx”产品的性能改进
                                    项目描述：对某部分功能进行完善与改进，同时增添某功能，依据xx的特点，设计出某产品。该产品通过某功能解决了某问题，并得到了某项奖项。
                                    职责描述：负责开发及测试工作，推动项目顺利进行，保证了项目进度。
                                    2016.01~2016.02“xxx”移动端APP产品设计
                                    项目描述：一款辅助设计的APP。
                                    责任描述：在此项目中完成前期竞品分析、核心功能流程图绘制。"
                                    />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <!--实习经历-->
                                <div class="label-title mt-12 d-flex-between" @click="showModel(4)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">实习经历</span>
                                    <div style="cursor: pointer">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14"></div>
                                <div v-if="messageStatus === 4">
                                    <Input v-model="projectExperience" type="textarea" placeholder="请输入" />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <!--获奖情况-->
                                <div class="label-title mt-12 d-flex-between" @click="showModel(5)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">获奖情况</span>
                                    <div style="cursor: pointer">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14"></div>
                                <div v-if="messageStatus === 5">
                                    <Input v-model="projectExperience" type="textarea" placeholder="请输入" />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <!--实践经验-->
                                <div class="label-title mt-12 d-flex-between" @click="showModel(6)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">实践经验</span>
                                    <div style="cursor: pointer">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14"></div>
                                <div v-if="messageStatus === 6">
                                    <Input v-model="projectExperience" type="textarea" placeholder="请输入" />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <!--所获证书-->
                                <div class="label-title mt-12 d-flex-between" @click="showModel(7)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">所获证书</span>
                                    <div style="cursor: pointer">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14"></div>
                                <div v-if="messageStatus === 7">
                                    <Input v-model="projectExperience" type="textarea" placeholder="请输入" />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <!--自我评价-->
                                <div class="label-title mt-12 d-flex-between" @click="showModel(8)">
                                    <span class="title" style="font-size: 16px; color: #1677ff">自我评价</span>
                                    <div style="cursor: pointer">
                                        <img src="../images/edit-pen.png" />
                                        <span style="font-size: 14px; margin-left: 5px">编辑</span>
                                    </div>
                                </div>
                                <div class="fs-14"></div>
                                <div v-if="messageStatus === 8">
                                    <Input v-model="projectExperience" type="textarea" placeholder="请输入" />
                                    <Button type="primary">保存</Button>
                                    <Button @click="messageStatus = 0">取消</Button>
                                </div>
                                <div style="height: 50px"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--简历目录-->
                <div style="width: 250px" class="debugger-bor-3 h-100 d-flex flex-column">
                    <!--预览简历-->
                    <div class="d-flex-center" style="width: 250px; height: 80px; border: 1px solid #edf1f7; cursor: pointer; background-color: #fff; border-radius: 4px">
                        <Icon type="md-eye" />
                        <span class="ml-12 fs-16" style="color: #333">预览简历</span>
                    </div>
                    <!--打印简历-->
                    <div class="d-flex-center mt-20" style="width: 250px; height: 80px; border: 1px solid #edf1f7; cursor: pointer; background-color: #fff; border-radius: 4px">
                        <Icon type="ios-print-outline" />
                        <span class="ml-12 fs-16" style="color: #333">打印简历</span>
                    </div>
                    <!--简历目录-->
                    <div class="mt-20 debugger-bor flex-1" style="background-color: #fff">
                        <div class="mb-32 resume-catalog d-flex align-items-center px-16">
                            <div style="border: 2px solid #fff; height: 25px; border-radius: 4px"></div>
                            <span style="color: #fff; font-size: 20px; margin-left: 16px">简历目录</span>
                        </div>
                        <!-- 步骤条-->
                        <div class="px-36">
                            <div class="step-stick-active is-active d-flex align-items-center" v-for="item in 10" :key="item">
                                <div class="">个人信息</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Hearder from '@/views/personalCenter/personage-layout/components/personage-header.vue';

// 控制填写信息
const messageStatus = 0;

// region TODO 基本信息
const basicInformationForm = {
    gender: null,
    dateOfBirth: null,
    nation: '',
    politicsStatus: '',
    nativePlace: '',
    province: '',
    city: '',
    placeProvince: '',
    placeCity: '',
    phone: '',
    email: ''
};
//校验手机号
const checkPhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('手机号不能为空'));
    } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
            callback();
        } else {
            return callback(new Error('请输入正确的手机号'));
        }
    }
};
// 校验出生日期
const checkdateOfBirth = (rule, value, callback) => {
    if (basicInformationForm.dateOfBirth) {
        callback();
    } else {
        return callback(new Error('请输入出生日期'));
    }
};
const basicInformationFormRules = {
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    dateOfBirth: [{ validator: checkdateOfBirth, required: true, message: '请选择出生日期', trigger: 'blur' }],
    nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
    phone: [{ validator: checkPhone, required: true, message: '请输入正确的手机号', trigger: 'blur' }],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确邮箱', trigger: 'blur' }
    ]
};

// endregion

// region TODO 求职期望
const jobExpectationForm = {
    operationalField: '',
    engageInTheIndustry: '',
    takeUpAPosition: '',
    typeOfWork: '',
    payRangeStart: '',
    payRangeEnd: '',
    arrivalTime: '',
    statusOfJobSeeking: ''
};
// 薪酬范围校验
const remuneration = (rule, value, callback) => {
    if (jobExpectationForm.payRangeStart < 0) {
        return callback(new Error('请输入薪酬范围'));
    } else if (jobExpectationForm.payRangeEnd < 0) {
        return callback(new Error('请输入薪酬范围'));
    } else {
        callback();
    }
};

const jobExpectationRules = {
    operationalField: [{ required: true, message: '请选择工作地区', trigger: 'change' }],
    engageInTheIndustry: [{ required: true, message: '请选择从事行业', trigger: 'change' }],
    takeUpAPosition: [{ required: true, message: '请选择担任职位', trigger: 'change' }],
    typeOfWork: [{ required: true, message: '请选择工作类型', trigger: 'change' }],
    payRange: [{ required: true, validator: remuneration, message: '请填写薪酬范围', trigger: 'blur' }],
    arrivalTime: [{ required: true, message: '请选择到岗时间', trigger: 'change' }],
    statusOfJobSeeking: [{ required: true, message: '请选择求职状态', trigger: 'change' }]
};
// endregion

// region TODO 项目经验
const projectExperience = '';
// endregion

// region TODO 实习经历

const internshipExperience = '';
// endregion

// region TODO 获奖情况

const scholarshipAndPrize = '';
// endregion

// region TODO 实践经验

const practicalExperience = '';
// endregion

// region TODO 所获证书

const receivedCertificate = '';
// endregion

// region TODO 自我评价

const selfAssessment = '';
// endregion
export default {
    components: { Hearder },
    data() {
        return {
            messageStatus,
            selfAssessment,
            receivedCertificate,
            practicalExperience,
            scholarshipAndPrize,
            internshipExperience,
            dateOptions_day: {
                disabledDate(date) {
                    var dateNow = new Date();
                    return date && date.valueOf() > dateNow.setMonth(dateNow.getMonth());
                }
            },
            projectExperience,
            jobExpectationForm,
            jobExpectationRules,
            basicInformationForm,
            basicInformationFormRules
        };
    },
    mounted() {},
    watch: {
        messageStatus(ov, nv) {
            if (nv === 1) {
                this.$refs.basicInformationRef.resetFields();
            } else if (nv === 2) {
                this.$refs.jobExpectationRef.resetFields();
            } else {
                this.projectExperience = '';
                this.internshipExperience = '';
                this.scholarshipAndPrize = '';
                this.practicalExperience = '';
                this.receivedCertificate = '';
                this.selfAssessment = '';
            }
        }
    },
    methods: {
        // region TODO 编辑信息
        showModel(status) {
            this.messageStatus = status;
        }
        // endregion
    }
};
</script>

<style scoped lang="less">
.resume-catalog {
    width: 100%;
    height: 60px;
    //background-image: url('../images/resumeCatalog.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.step-stick-active {
    font-size: 14px;
    color: #333;
    padding: 16px 0;
    position: relative;
    --active-steps: #0087fa;

    &.is-active {
        --active-steps: #fa003a;
    }

    //height: 35px;
    //line-height: 35px;
    &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 12px;
        border: 2px solid var(--active-steps);
    }

    & + .step-stick-active {
        &::after {
            content: '';
            display: inline-block;
            left: 3px;
            position: absolute;
            top: calc(-50% + 4px);
            width: 2px;
            height: calc(100% - 8px);
            background: #eeeeee;
        }
    }
}

.label-title {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    line-height: 50px;
    margin-bottom: 12px;

    .title {
        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid #0087fa;
            margin-right: 20px;
        }
    }
}
</style>
